<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script>
        window.onload = async function (){
          await axios.get("/country/findAll").then(resp =>{
               var info = resp.data;
               var str = "";
               info.forEach(n =>{
                  str += `<option value="${n.id}">${n.name}</option>`;
               });
               $("countrySelect").innerHTML = str;
           });
           findCity();
        }

        function findCity(){
            //得到国家ID
            let countryId = $("countrySelect").value;
            axios.get("/city/findByCountry",{
                params:{
                    countryId
                }
            }).then(resp =>{
                var info = resp.data;
                var str = "";
                info.forEach( n =>{
                    str += `<option>${n.name}</option>`;
                });
                $("citySelect").innerHTML = str;
            });
        }

        function $(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <select id="countrySelect" onchange="findCity()"></select>
    <select id="citySelect"></select>
</body>
</html>